<script setup>
import useStore from '../store/index'
import { storeToRefs } from 'pinia'
const { todoList } = useStore()
todoList.$subscribe(() => {
  window.localStorage.setItem('todos', JSON.stringify(todoList.list))
})
console.log(todoList.list)
const { list, newList } = storeToRefs(todoList)
// 点击状态选项
const checkChange = id => {
  todoList.setDone(id)
  console.log('list', list)
}
</script>

<template>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li
        :class="{ completed: item.done }"
        v-for="item in newList"
        :key="item.id"
      >
        <div class="view">
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @change="checkChange(item.id)"
          />
          <label>{{ item.name }}</label>
          <button class="destroy" @click="todoList.delList(item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<style lang="less" scoped></style>
